@media (min-width:"769px") {
  .home-banner {}

  .home-button {
    width: 1300px;
    margin: 0 auto;
    position: relative;

    .home-swiper-button {
      margin: 270px auto 0;

      &:focus {
        outline: none;
      }

      width: 50px;
      height: 79px;
      background-color: rgba(0, 0, 0, .1);
      color: #e4e5e8;

      &:hover {
        background-color: rgba(0, 0, 0, .2);
        transition: all .3s linear;
      }

      &.swiper-button-next {
        background-image: url(../../img/banner-right-arr.png);
        background-position: 4px;
        background-size: 50px 60px;
      }

      &.swiper-button-prev {
        // background: url(../../img/banner-left-arr.png) no-repeat center center;
        background-image: url(../../img/banner-left-arr.png);
        background-size: 50px 60px;
      }
    }
  }

  .wedding-c {
    width: 1200px;
    margin: 80px auto 0;
    overflow: hidden;

    .wedding-banner-m {
      display: none;
    }

    .wedding-banner {
      margin-bottom: 60px;

      .swiper-pagination {
        top: 80px;
        height: 50px;

        .swiper-pagination-bullet {
          width: 90px;
          height: 50px;
          margin: 0 10px;
          border-radius: 0;
          color: #4d4d4d;
          background-color: transparent;
          opacity: 1;

          &:focus {
            border: 0;
          }
        }

        .swiper-pagination-bullet-active {
          color: #b9ab77;

          &::after {
            content: '';
            display: block;
            margin: 10px auto;
            width: 4px;
            height: 4px;
            background-color: currentColor;
            border-radius: 50%;
          }
        }
      }

      .swiper-wrapper {
        margin-top: 160px;

        .swiper-slide {
          font-size: 0;

          img {
            filter: grayscale(100%);
            background-color: blue;
            z-index: 1;
          }

          &:hover>img {
            filter: none;
          }

          .mask {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            color: #ffffff;
            text-align: center;
            transition: all 0.4s ease-in-out;
            transition-delay: 0.4s;

            h3 {
              font-size: 14px;
              margin: 120px auto 30px auto;
            }

            p {
              font-size: 12px;
              line-height: 2;
            }

            background-color: rgba(0, 0, 0, .1);
          }

          &:hover>.mask {
            opacity: 1;
          }

        }
      }
    }

  }

  .jewelry-c {
    width: 1200px;

    .commit-title {
      margin: 100px 0 53px;
    }

    .jewelry-product {
      margin-right: -40px;

      &::after {
        content: '';
        display: block;
        clear: both;
      }

      .item {
        position: relative;
        font-size: 0;
        float: left;
        margin-right: 40px;

        &:hover>.item-text {
          opacity: 1;
        }

        .item-text {
          position: absolute;
          margin-top: -60px;
          opacity: 0;
          height: 60px;
          width: 100%;
        }
      }
    }
  }

  .activities-c-m {
    display: none;
  }

  .activities-c {
    width: 1200px;
    margin: 0 auto;

    .activity-list {
      margin-top: 170px;

      &::after {
        display: table;
        content: '';
        clear: both;
      }

      .activity-item {
        position: relative;
        float: left;
        font-size: 0;

        img {
          width: 300px;
          height: 350px;
        }

        .border {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          width: 95%;
          height: 95%;
          margin: auto;
          border: 1px solid #c3c3c31a;
          transition: background-color .3s linear;
        }

        &:hover>.border {
          width: 100%;
          height: 100%;
          background-color: RGB(241, 239, 240, .9);
          border: none;

          .activity-text {
            height: 100%;
            padding: 40px;

            h3 {
              font-size: 30px;
              color: #939393;

              span {
                font-size: 14px;
              }
            }

            h4 {
              margin-top: 45px;
              font-size: 16px;
              font-weight: bolder;
            }

            p {
              font-size: 13px;
              color: #8b8b8b;
              margin-top: 20px;
              margin-bottom: 55px;
              overflow: hidden;
              // white-space: nowrap;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            a {
              font-size: 14px;
              padding: 10px 10px 10px 0;
              color: #bebebe;
            }
          }
        }
      }
    }
  }

  .designers-c {
    width: 1200px;
    margin: 0 auto;

    .designers-list {
      padding: 0 55px;
      margin-right: -150px;

      .designer {
        width: 277px;
        float: left;
        margin-right: 135px;

        .designer-avatar {
          width: 180px;
          height: 180px;
        }

        .name {
          margin: 25px 0 10px;
        }

        .position {
          margin: 10px 0 18px;
        }

        .more {
          width: 150px;
          line-height: 3;
          margin: 60px 0;

          &:hover {
            color: #fff;
          }
        }
      }
    }
  }



  .toup {
    right: 200px;
    bottom: 25px;

    a {
      width: 50px;
      height: 50px;
    }
  }
}

@media (max-width:768px) {
  .home-swiper-button {
    display: none;
  }

  .content-c {
    .commit-more {
      margin-top: 40px;
      margin-bottom: 40px;
    }

    .wedding-c {
      overflow: hidden;
      margin-top: 40px;

      .wedding-banner {
        display: none;
      }

      .wedding-banner-m {
        margin: 0 10px;
        width: auto;
        overflow: hidden;

        .swiper-pagination {
          top: 0px;
          height: 50px;

          .swiper-pagination-bullet {
            font-size: 13px;
            width: 22%;
            height: 27px;
            border-radius: 0;
            color: #4d4d4d;
            background-color: #fff;
            opacity: 1;

          }

          .swiper-pagination-bullet-active {
            color: #b9ab77;

            &::after {
              content: '';
              display: block;
              margin: 10px auto;
              width: 4px;
              height: 4px;
              background-color: currentColor;
              border-radius: 50%;
            }
          }

        }

        .swiper-wrapper {
          margin-top: 70px;

          .swiper-slide {
            font-size: 0;
            margin: -10px 0;

            img {
              height: 100%;
              width: 100%;
            }
          }
        }
      }

    }
  }

  .jewelry-c {
    width: auto;
    text-align: center;
    font-size: 0;

    .item {
      overflow: hidden;
      position: relative;
      display: inline-block;
      font-size: 14px;

      img {
        width: 325px;
        margin: 0 auto;
        display: block;
      }

      .item-text {
        position: absolute;
        text-align: left;
        text-indent: 15px;
        margin-top: -64px;
        height: 64px;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;

        h3 {
          font-size: 14px;
        }

        p {
          margin: 5px 0;
        }
      }
    }

    .commit-more {
      font-size: 20px;
    }
  }

  .activities-c {
    display: none;
  }

  .activities {
    .activities-c-m {
      display: block;
      font-size: 0;

      .activity-list {
        .activity-item {
          img {
            width: 50%;
          }

          .border {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            right: 0;
            padding: 10px;
            background-color: RGB(241, 239, 240, .9);

            .activity-text {
              height: 100%;

              h3 {
                font-size: 20px;
                color: #939393;

                span {
                  font-size: 12px;
                }
              }

              h4 {
                margin-top: 15px;
                font-size: 14px;
                font-weight: bolder;
              }

              p {
                font-size: 13px;
                margin-top: 20px;
                margin-bottom: 55px;
                overflow: hidden;
                // white-space: nowrap;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }

              a {
                font-size: 14px;
                padding: 10px 10px 10px 0;
                color: #bebebe;
              }
            }
          }

        }

      }

      .commit-more {
        margin: 20px auto;
        font-size: 20px;
      }
    }
  }

  .designers-c {
    margin: 0 5px;

    .commit-title {
      margin-top: 20px;
    }

    .designers-list {
      .designer {
        width: 277px;
        margin: 0 auto;

        .designer-avatar {
          width: 180px;
          height: 180px;
        }

        .name {
          margin: 25px 0 10px;
        }

        .position {
          margin: 10px 0 18px;
        }

        .more {
          width: 60px;
          line-height: 3;
          margin: 30px 0 100px;

          &:hover {
            color: #fff;
          }
        }
      }
    }
  }
}